<template>
  <div class="toplist">
    <search-header></search-header>
    <div class="toplistwrapper">
      <div class="toplistcontent">
        <top-header></top-header>
        <top-card :cardlists="cardlists"></top-card>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import TopHeader from "./components/topheader";
import TopCard from "./components/topcard";
import Bscroll from "better-scroll";
import Tabbar from "@/components/tabbar/tabbar.vue";
import SearchHeader from "@/components/header/SearchHeader";
import axios from "axios";
import ObserveDom from "@better-scroll/observe-dom";
Bscroll.use(ObserveDom);
export default {
  name: "toplist",
  components: {
    TopHeader,
    SearchHeader,
    TopCard,
    Tabbar,
  },
  data() {
    return {
      cardlists: [],
    };
  },
  methods: {
    async getTopListData() {
      let res = await axios.get("/api/toplist.json");
      res = res.data;
      if (res.data && res.ret) {
        const result = res.data;
        this.cardlists = result.cardlists;
      }
    },
  },
  mounted() {
    // 请求数据,确定数据页面长度后再绑定scroll，确保可以滑动
    this.getTopListData().then(() => {
      this.scroll = new Bscroll(".toplistwrapper", {
        click: true,
        scrollbar: true,
        observeDOM: true,
      });
    });
  },
};
</script>
<style lang="scss">
.toplist {
  overflow: hidden;
  .toplistwrapper {
    height: 82vh;
  }
}
</style>
